<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/app.css">
		<!--App自定义的css-->
		<style type="text/css">
			html, body{
				background: #fff;
			}
			.mui-content{
				display: none;
				position:relative;
				margin-top:44px;
				padding:0px!important;
			}
			.mui-content-padded,.mui-content-time{
				margin:5px 10px 0px 10px;	
			}
			.mui-content-time span{
				color:#000;/*#9fa41c;*/
				/*font-weight: 700;*/
			}
			.mui-huodong-list{
				/*float: left;*/
				margin:10px 10px 0 10px;
				padding:10px;
				background: #f7f7f7;
				border-radius: 5px;
			}
			.mui-huodong-list p{
				margin:0; 
			}
			.mui-huodong-list:nth-child(1){
				/*margin-top:45px;*/
			}
			/*.mui-huodong-list:nth-child(2n){
				width:calc(50% - 20px);
				margin: 10px 10px 10px 0;
			}
			.mui-huodong-list:nth-child(2n+1){
				width:calc(50% - 10px);
				margin: 10px 10px;
			}
			.mui-huodong-list:nth-child(n+3){
				margin-top: 0px;
			}*/
			.mui-huodong-list img{
				height:220px;
				
			}
			.mui-huodong-date{
				font-size:12px;
			}
			.mui-huodong-list .mui-huodong-title{
				color:#333;
				margin:15px 0 5px;
				line-height: 18px;
			}
		</style>

	</head>

	<body>
		<div class="mui-bar mui-bar-nav">
			<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
			<h1 class="mui-title">全部活动</h1>
			<!--<span class="mui-icon mui-icon-more-filled mui-pull-right"></span>-->
		</div>
		<div class="mui-content mui-huodong" id="mui-huodong">
			<div style="padding-top:1px;"></div>
			<div id="mui-huodong-content" class="mui-huodong-content">
				<!--<div class="mui-huodong-list" data-id="123">
				<img src="../images/banner05.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner06.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner03.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner04.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner01.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner02.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner07.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner08.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner09.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>
			<div class="mui-huodong-list">
				<img src="../images/banner10.jpg" width="100%" />
				<p class="mui-huodong-title">明星们监狱生活有喜有优：高晓松最快活，谢霆锋肛门受损</p>
				<p class="mui-huodong-date">2017-05-04 12:00</p>
			</div>-->
			</div>
			<div style="padding-bottom:10px;"></div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/castapp.js"></script>
	<script src="../js/myapp.js"></script>
	<script>
		ca.init();
		//接收通知消息
		ca.receiveNotice("shijian",function(event){
			//获取对象id
			var isLoading = event.detail.isLoading;
			if(isLoading != 111){
				//延时加载
				lazyLoading('mui-content',function(){
					//初始化数据
					get_activity_list(function(){
						//回调注册事件
						var mui_huodong_list = ca.className('mui-huodong-list');
						for (var i = 0, length = mui_huodong_list.length; i < length; i++) { //把每个button元素便利出来
				            var button = mui_huodong_list[i];
				            if (button.addEventListener) { //判断游览器的兼容问题，如果是ie8以下的用的是else语用代码段里的
				                button.addEventListener("tap", add_event)
				            } else {
				                button.attachEvent("tap", add_event)
				            }
				        }
					});
				});
			}
			else{
				ca.className('mui-content')[0].style.display = 'block';
			}
		});
        //获取活动列表信息
		function get_activity_list(callBack){
			var access_token = localStorage.getItem('access_token');
			var url = request_url+'/api/public/get_activity_list?access_token='+access_token;
			ca.get({
				url:url,
				data:{},
				succFn:function(res){
					var json = JSON.parse(res);
					console.log(res);
					//ca.prompt(json.msg);
					if(json.status == 1){
						var html = '';
						var result = json.result;
						for(var i in result){
							html += '<div class="mui-huodong-list" data-id="'+result[i].id+'">';
							html += '<img class="lazyloading" data-original="'+result[i].smeta+'" src="'+result[i].smeta+'" width="100%" />';
							html += '<p class="mui-huodong-title">'+result[i]['post_title']+'</p>';
							html += '<p class="mui-huodong-date">'+result[i]['create_time'].substr(5,11)+'</p></div>';
						}
						ca.id('mui-huodong-content').innerHTML = html;
						callBack();
					}
				}
			});
		}
		var flag = true;
		//触发执行事件
        function add_event(e) { //e.currentTarget触发该事件的元素    e.target则是目标节点元素
//      	console.log();
        	var thisEl = e.currentTarget;
        	var data_id = thisEl.getAttribute('data-id');
        	ca.newInterface({id:'huodong_detail',url:'refresh.html'});
        	//发送通知
        	if(flag){
        		//防止点击过快
//      		flag = false;
//      		ca.sendNotice('huodong_detail','huodong_detail',{data_id:data_id});
//      		setTimeout(function(){flag=true},500);
        	}
			
        	//console.log(thisEl.getElementsByTagName('p')[0].innerText);
        	//console.log(thisEl.getElementsByTagName('img')[0].src);
        	//console.log(thisEl.getAttribute('data-id'));
        }
		//下拉刷新
//		var num = 0;
//		ca.refreshDownLoad('mui-huodong-content',function(clearLoad){
//			console.log(num++);
//			setTimeout(function(){
//				clearLoad();
//			},2000);
//		});
</script>
	<!--<script src="../js/mui.lazyload.js"></script>
	<script src="../js/mui.lazyload.img.js"></script>
	<script>
		mui.init();
		(function($) {
			$(document).imageLazyload({
				placeholder: '../images/default_avatar.png'
			});
		})(mui);
	</script>-->
</html>